
// 导入 HOOKS
import { useParams, useSearchParams } from 'react-router-dom';

import { UsersConsumer } from './usersContext';

function UserDetail(){

    // 获取 URL 中包含的参数，比如 `/user/detail/1122`
    const params = useParams();
    console.log( params );

    // 用于 获取 或 设置 查询参数 ( 即 queryString )
    const [searchParams, setSearchParams] = useSearchParams();
    console.log( searchParams.get( 'id' ) );
    console.log( setSearchParams );

    const userId = params.id || searchParams.get('id') ;

    const handle = users => {
        let user = users.find( u => u.id === parseInt( userId ) );
        return (
            <>
             <p>编号: { user.id }</p>
             <p>账户: { user.account }</p>
             <p>昵称: { user.nickname }</p>
            </>
        )
    }

    return (
        <div className="user-detail">
            <UsersConsumer>{ value => handle(value) }</UsersConsumer>
        </div>
    )
}

export default UserDetail;